<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';
import { useEcharts } from '@vben/plugins/echarts';

import { Button, Card, Col, Row, Select, Space } from 'ant-design-vue';

const chartRef = ref();
const { renderEcharts } = useEcharts(chartRef);
const timeRange = ref('week');
const resourceType = ref('all');

// 图表数据
const chartData = ref({
  usageRate: [],
  revenue: [],
  occupancy: [],
  trends: [],
});

// 时间范围选项
const timeRangeOptions = [
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' },
  { label: '本季度', value: 'quarter' },
  { label: '本年', value: 'year' },
];

// 资源类型选项
const resourceTypeOptions = [
  { label: '全部资源', value: 'all' },
  { label: '房间', value: 'room' },
  { label: '设备', value: 'equipment' },
  { label: '场地', value: 'venue' },
  { label: '人员', value: 'personnel' },
];

// 加载图表数据
const loadChartData = async () => {
  try {
    // 模拟数据
    const mockData = {
      usageRate: [
        { name: '房间', value: 85 },
        { name: '设备', value: 72 },
        { name: '场地', value: 68 },
        { name: '人员', value: 91 },
      ],
      revenue: [
        { date: '03-01', value: 12_000 },
        { date: '03-02', value: 15_000 },
        { date: '03-03', value: 18_000 },
        { date: '03-04', value: 14_000 },
        { date: '03-05', value: 16_000 },
        { date: '03-06', value: 19_000 },
        { date: '03-07', value: 17_000 },
      ],
      occupancy: [
        { time: '00:00', value: 15 },
        { time: '04:00', value: 8 },
        { time: '08:00', value: 45 },
        { time: '12:00', value: 78 },
        { time: '16:00', value: 92 },
        { time: '20:00', value: 85 },
        { time: '24:00', value: 25 },
      ],
      trends: [
        { month: '1月', usage: 65, revenue: 120_000 },
        { month: '2月', usage: 72, revenue: 150_000 },
        { month: '3月', usage: 78, revenue: 180_000 },
        { month: '4月', usage: 75, revenue: 170_000 },
        { month: '5月', usage: 82, revenue: 200_000 },
        { month: '6月', usage: 88, revenue: 220_000 },
      ],
    };

    chartData.value = mockData;
    initCharts();
  } catch (error) {
    console.error('加载图表数据失败:', error);
  }
};

// 初始化图表
const initCharts = () => {
  const option = {
    title: {
      text: '资源使用率统计',
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}% ({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: chartData.value.usageRate.map((item) => item.name),
    },
    series: [
      {
        name: '使用率',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        data: chartData.value.usageRate,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
        label: {
          show: true,
          formatter: '{b}: {c}%',
        },
      },
    ],
  };

  renderEcharts(option);
};

// 更新图表
const updateChart = () => {
  loadChartData();
};

// 响应式处理
const handleResize = () => {
  // 图表会自动响应窗口大小变化
};

onMounted(() => {
  loadChartData();
});

// 清理
const cleanup = () => {
  // 组件销毁时会自动清理
};
</script>

<template>
  <Card title="资源使用率分析" :bordered="false">
    <!-- 控制面板 -->
    <div class="chart-controls">
      <Row :gutter="16" align="middle">
        <Col :span="8">
          <Space>
            <span>时间范围：</span>
            <Select
              v-model:value="timeRange"
              style="width: 120px"
              :options="timeRangeOptions"
              @change="updateChart"
            />
          </Space>
        </Col>
        <Col :span="8">
          <Space>
            <span>资源类型：</span>
            <Select
              v-model:value="resourceType"
              style="width: 120px"
              :options="resourceTypeOptions"
              @change="updateChart"
            />
          </Space>
        </Col>
        <Col :span="8" style="text-align: right">
          <Button type="primary" @click="updateChart">
            <IconifyIcon icon="mdi:refresh" />
            刷新数据
          </Button>
        </Col>
      </Row>
    </div>

    <!-- 图表容器 -->
    <div class="chart-container">
      <div
        ref="chartRef"
        class="chart"
        style="width: 100%; height: 400px"
      ></div>
    </div>

    <!-- 统计卡片 -->
    <div class="statistics-cards">
      <Row :gutter="16">
        <Col :span="6">
          <div class="stat-card">
            <div class="stat-icon" style="background-color: #1890ff">
              <IconifyIcon icon="mdi:chart-pie" />
            </div>
            <div class="stat-content">
              <div class="stat-value">78.5%</div>
              <div class="stat-label">平均使用率</div>
            </div>
          </div>
        </Col>
        <Col :span="6">
          <div class="stat-card">
            <div class="stat-icon" style="background-color: #52c41a">
              <IconifyIcon icon="mdi:currency-usd" />
            </div>
            <div class="stat-content">
              <div class="stat-value">¥185,000</div>
              <div class="stat-label">本月收入</div>
            </div>
          </div>
        </Col>
        <Col :span="6">
          <div class="stat-card">
            <div class="stat-icon" style="background-color: #faad14">
              <IconifyIcon icon="mdi:clock-outline" />
            </div>
            <div class="stat-content">
              <div class="stat-value">1,256</div>
              <div class="stat-label">总预约数</div>
            </div>
          </div>
        </Col>
        <Col :span="6">
          <div class="stat-card">
            <div class="stat-icon" style="background-color: #722ed1">
              <IconifyIcon icon="mdi:trending-up" />
            </div>
            <div class="stat-content">
              <div class="stat-value">+12.5%</div>
              <div class="stat-label">环比增长</div>
            </div>
          </div>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<style scoped>
.chart-controls {
  padding: 16px;
  margin-bottom: 24px;
  background: #fafafa;
  border-radius: 6px;
}

.chart-container {
  padding: 16px;
  margin-bottom: 24px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
}

.statistics-cards {
  margin-top: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: 16px;
  font-size: 20px;
  color: white;
  border-radius: 8px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: bold;
  color: #1890ff;
}

.stat-label {
  font-size: 14px;
  color: #666;
}
</style>
